| index | introduction | document properties | positioned elements | previewing | element properties | page backgrounds | images | grouping | alignment |  |
 |
Although we are taking our time (and I'm sure you are skipping the bits you find obvious), we are really covering most of the main features in the application in some detail. Let's take a look now at how to add a background image to our layout. This image will become the foundation for our page layout.
We've already seen the Page Properties Editor (when we gave the page a title). This time we want to add a background image. Here is the Page Properties Editor again
figure 16: page properties editor
We use the background section of this editor to give the page a background color or image. For now, we will just worry about the image field.
To add a background image to the page
1. in the popup menu to the right of the url field, select
2. a dialog box opens that will allow you to choose the image you want as your background image. Select it and click OK
The background image url will now appear in the field labeled url. If you are working in WYSIWYG, the background image will appear in the layout window. Note that if you want to work in WYSIWYG mode but you don't want to see the background image you can turn it off using the preferences window.
Exercise
We've prepared a background image for you to add to the page you're working on. It's called background.gif and it's inside a folder called images inside the folder called tutorial_exercise inside the folder called tutorial that came as part of your download.
Your page will look something like this now if you are working in WYSIWYG mode.
figure 17: WYSIWYG background image
Exercise
You might like to reposition and resize the welcome element, and even to change the background color you gave this element to make it more harmonious with the background image.
Here is my effort.
figure 18: edited positioned element
To color the text in the welcome element, you'll have to edit the style sheet for this page with a style sheet editor, or text editor.
By putting in our background image you might be able to guess where we are heading. Next we want to add the main navigation elements for the page. These are a series of images that will sit on the circumference of the circle.
| index | introduction | document properties | positioned elements | previewing | element properties | page backgrounds | images | grouping | alignment | |
|